<template>
  <div class="tabbar">
    <router-link :to="tab.url" class="tab" @click.native="selectedIndex = index" v-for="(tab, index) of tabs" :key="tab.id" replace>
      <tc-icon :icon="selectedIndex === index ? tab.selectedIcon : tab.icon"></tc-icon>
      <span class="title">{{ tab.name }}</span>
    </router-link>
  </div>
</template>

<script lang="ts">
  import Router from 'vue-router'
  import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'
  import TcIcon from './TcIcon.vue'

  @Component({
    props : ['tabs'],
    components: {
      TcIcon
    }
  })
  export default class TcTabbar extends Vue{
    @Prop({ required: true })
    tabs: any[]

    selectedIndex = 0

    mounted () {
      this.$props['tabs'].forEach(element => {
        if (this.$router.currentRoute.path === element.url) {
          this.selectedIndex = element.id
        }
      });
    }
  }
</script>


<style lang="less" scoped>
@import (reference) "~@/less/resources.less";
.theme(@background-color, @active-color){
  .tabbar{
    width: 100%;
    height: @tc-tabbar-height;
    background-color: @background-color;
    border-top: @border-value;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 99;

    .tab{
      flex: 1;
      display: flex;
      height: @tc-tabbar-height;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .icon{
        margin-top: @tc-tabbar-separation;
        margin-bottom: @tc-tabbar-separation;
        width: @tc-tabbar-icon-size;
        height: @tc-tabbar-icon-size;
      }

      .title{
        margin-bottom: @tc-tabbar-separation;
        font-size: @tc-tabbar-font-size;
      }
    }
  }

  .router-link-active {
    .title{
      color: @active-color;
    }
  }
}
.theme-default{
  .theme(@default-tc-tabbar-background-color, @default-tc-tabbar-active-color)
}
.theme-dark{
  .theme(@dark-tc-tabbar-background-color, @dark-tc-tabbar-active-color)
}
</style>
